<template>
  <el-container class="report-list-container">
    <el-main>
      <el-card shadow="never" class="selectCard searchColumn">
        <el-form label-position="right" label-width="6rem">
          <el-row :gutter="40">
            <el-col :span="10">
              <el-form-item label="报表名称：">
                <el-input v-model="searchParams.reportName" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <SearchButton :default-params="searchParams" @refreshParams="searchParams" @getList="getList" />
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card shadow="never" class="report-list-container tableCard">
        <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: getList}" print />
        <vxe-table
          ref="xTree"
          border
          stripe
          resizable
          highlight-hover-row
          show-overflow
          :tree-config="{children: 'children'}"
          :loading="loading"
          :auto-resize="true"
          :data="reportList"
          height="400"
          :print-config="{}"
        >
          <vxe-table-column field="code" title="报表代码" width="150" />
          <vxe-table-column field="name" title="报表名称" width="210" />
          <vxe-table-column field="note" min-width="120" title="备注" />
          <vxe-table-column field="createTime" width="150" title="创建时间" />
          <vxe-table-column title="操作" fixed="right" width="200" align="center" slots="default">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="previewJimuReport(scope.row.id, 2, true)">查看</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :current-page.sync="tableCurrentPage"
          :page-size.sync="pageSize"
          :total="total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          @page-change="getList()"
        />
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import SearchButton from '@/components/SearchButton'
import '@/components/frameDialog'
import { getToken, getTenantId } from '@/utils/auth'
import { getLocalStorage, setLocalStorage } from '@/utils/localStorage'
import { getJmPageList, getJimuReportServer } from '@/api/report/reportManage'
const STORAGE_JIMU_REPORT_DOMAIN = 'jimu_report_domain'
export default {
  components: {
    SearchButton
  },
  data() {
    return {
      reportList: [],
      loading: false,
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0,
      searchParams: {
        reportName: '',
        reportType: 'chartinfo',
        publishStatus: 1
      },
      dialogVisible: false,
      diabledEdit: true,
      type: '2',
      reportUrl: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    previewJimuReport(id, type, bool) {
      var reportId = id
      if (window.localStorage) {
        const domainUrl = getLocalStorage(STORAGE_JIMU_REPORT_DOMAIN)
        if (domainUrl !== null) {
          this.reportUrl = domainUrl + '/jmreport/view/' + reportId + '?token=' + getToken() + '&tenantId=' + getTenantId()
        } else {
          getJimuReportServer().then(response => {
            if (response) {
              this.reportUrl = response + '/jmreport/view/' + reportId + '?token=' + getToken() + '&tenantId=' + getTenantId()
              setLocalStorage(STORAGE_JIMU_REPORT_DOMAIN, response)
            }
          })
        }
      }
      window.open(this.reportUrl)
    },
    getList() {
      getJmPageList({
        pageNum: this.tableCurrentPage,
        pageSize: this.pageSize,
        ... this.searchParams
      }).then(response => {
        if (response) {
          this.reportList = response.records
          this.total = response.total
        }
      })
    }
  }
}
</script>

<style lang="scss">
.report-list-container {

}
</style>
